<h1>Create schedule(s)</h1>
<div *ngIf="!loading" style="padding-bottom: 1rem">
  <form clrForm [formGroup]="form" clrLayout="horizontal" clrLabelSize="4" (submit)="submit()">
    <div *ngIf="config.tasks.length == 1" formArrayName="names">
      <div class="clr-form-control clr-row">
        <div class="clr-col-md-1 clr-control-label">Task Name</div>
        <div class="clr-col-10">
          {{config.tasks[0].name}}
        </div>
      </div>
      <clr-input-container>
        <label class="clr-col-md-1">Schedule</label>
        <input clrInput type="text" [formControl]="form.get('names').controls[0]" name="example"
               [dataflowFocus]="true"/>
        <clr-control-error *clrIfError="'required'">The name is required.</clr-control-error>
        <clr-control-error *clrIfError="'exist'">The name already exists.</clr-control-error>
      </clr-input-container>
    </div>
    <div *ngIf="config.tasks.length > 1" formArrayName="names">
      <div class="alert alert-danger" *ngIf="form.get('names').errors?.notUnique">
        <div class="alert-items">
          <div class="alert-item static">
            <div class="alert-icon-wrapper">
              <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
            </div>
            <span class="alert-text">Duplicate schedule name on the form.</span>
          </div>
        </div>
      </div>
      <div *ngFor="let task of config.tasks; index as i">
        <div class="clr-form-control clr-row">
          <div class="clr-col-md-1 clr-control-label">Task Name</div>
          <div class="clr-col-10">
            {{task.name}}
          </div>
        </div>
        <clr-input-container>
          <label class="clr-col-md-1">Schedule</label>
          <input clrInput type="text" [formControl]="form.get('names').controls[i]" name="example"
                 [dataflowFocus]="i === 0"/>
          <clr-control-error *clrIfError="'required'">The name is required.</clr-control-error>
          <clr-control-error *clrIfError="'exist'">The name already exists.</clr-control-error>
          <clr-control-error *clrIfError="'notUnique'">The name already exists.</clr-control-error>
        </clr-input-container>
      </div>
    </div>
    <clr-input-container>
      <label class="clr-col-md-1">Cron Expr.</label>
      <input clrInput type="text" [formControl]="form.get('cron')" name="example"/>
      <clr-control-error *clrIfError="'required'">The cron expression is required.</clr-control-error>
    </clr-input-container>
    <clr-control-container class="key-value-wrapper">
      <label class="clr-col-md-1">Arguments</label>
      <app-key-value clrControl formControlName="args"></app-key-value>
      <clr-control-helper>
        Arguments can be prefixed by <code>--</code> (optional). Example:<br/>
        <pre><code>--myarg1=value1
--myarg2=value2</code></pre>
      </clr-control-helper>
      <clr-control-error>
        One or more arguments are invalid.<br/>Example: <code>myarg=myvalue</code>.
      </clr-control-error>
    </clr-control-container>
    <clr-control-container class="key-value-wrapper">
      <label class="clr-col-md-1">Properties</label>
      <app-key-value clrControl formControlName="props"></app-key-value>
      <clr-control-helper>
        Parameters should start with an <code>app.</code> or <code>deployer.</code>. Example:<br/>
        <pre><code>app.myparam=value1
deployer.myparam2=value2</code></pre>
      </clr-control-helper>
      <clr-control-error>
        One or more parameters are invalid.<br/>Example: <code>app.myarg=myvalue</code>.
      </clr-control-error>
    </clr-control-container>
    <clr-control-container>
      <label class="clr-col-md-1"></label>
      <button class="btn btn-secondary" type="button" (click)="back()">Cancel</button>
      <button class="btn btn-primary" type="submit">Create schedule(s)</button>
    </clr-control-container>
  </form>
</div>
<clr-modal [(clrModalOpen)]="creating" *ngIf="config" [clrModalClosable]="false">
  <h3 class="modal-title">Create schedule(s)</h3>
  <div class="modal-body">
    <clr-spinner clrInline clrSmall></clr-spinner>
    Creating schedule(s)...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" [disabled]="true">Cancel</button>
  </div>
</clr-modal>
